<template>
  <div>
    <div class="situation-page">
      <div class="page-header">
        <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
        <div class="page-title">支部积分统计</div>
      </div>
      <div class="page-body">
        <div class="table-search">
          <el-form inline>
            <el-form-item label="任务名称">
              <el-input v-model="queryParams.pointsSettingsName" size="mini" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                v-model="queryDate"
                value-format="yyyy-MM-dd"
                @change="queryDateChange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="search">搜索</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table-box">
          <el-table
            :data="tableData"
            ref="table"
            height="100%"
          >
            <el-table-column prop="pointsSettingsName" label="任务名称" align="center" min-width="180" />
            <el-table-column prop="pointsAvailable" label="获取积分" align="center" width="150" />
            <el-table-column prop="getTime" label="获取时间" align="center" width="180" />
            <el-table-column label="操作" align="center" width="80">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openDelete(scope.row)"
                >作废</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getData"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { queryDetailByCondition } from '@/api/cadreBusiness/IntegralStatistics'
export default {
  data () {
    return {
      queryParams: {
          pageNo: 1,
          pageSize: 10,
          pointsSettingsName: '',
          startTime: '',
          endTime: ''
      },
      total: 0,
      tableData: [],
      queryDate: [],
      id: '',
      multipleSelection: [],
      isDetail: false
    }
  },
  methods: {
    init ({ id }) {
      this.id = id
      this.search()
    },
    search () {
      this.queryParams.pageNo = 1
      this.getData()
    },
    openDelete (row) {
      this.$confirm('是否确认作废?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {})
    },
    getData () {
      const obj = {
        ...this.queryParams,
        id: this.id
      }
      queryDetailByCondition(obj).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
      })
    },
    goback () {
      this.$emit('goback')
    },
    queryDateChange (val) {
      this.queryParams.startTime = val[0]
      this.queryParams.endTime = val[1]
    },
    reset () {
      this.queryParams.pointsSettingsName = ''
      this.queryParams.startTime = ''
      this.queryParams.endTime = ''
      this.queryDate = []
      this.search()
    }
  }
}
</script>
<style scoped lang="scss">
.page-header {
  display: flex;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid #ddd;
  .back-button {
    margin-right: 16px;
  }
  .page-title {
    font-size: 18px;
    font-weight: 600;
  }
}
.page-body {
  padding-top: 16px;
  .table-box {
    height: calc(100vh - 280px);
    .click-span {
      cursor: pointer;
      color: #409EFF;
    }
  }
}

</style>
